<!DOCTYPE html>
<html>
<head>
    <meta content="text/html" charset="UTF-8">
    <title>jQuery EasyUI Demo</title>
    <link rel="stylesheet" type="text/css" href="css/themes/bootstrap/easyui.css">
    <link rel="stylesheet" href="css/themes/icon.css"/>
    <link rel="stylesheet" href="css/themes/color.css"/>
    <link rel="stylesheet" type="text/css" href="css/mycss.css"/>
    <script type="text/javascript" src="js/jquery-2.1.1.min.js"></script>
    <script type="text/javascript" src="js/jquery.easyui.min.js"></script>
</head>
<body>
<div>
    <div id="tb1">
        <a href="javascript:$news_msg_add_win.window('open')" class="easyui-linkbutton" data-options="iconCls:'icon-add',plain:true">添加</a>
        <a href="javascript:del_news_msg()" class="easyui-linkbutton" data-options="iconCls:'icon-remove',plain:true">删除</a>
        <a href="javascript:$news_msg.edatagrid('saveRow')" class="easyui-linkbutton" data-options="iconCls:'icon-save',plain:true">保存</a>
        <a href="javascript:$news_msg.edatagrid('cancelRow')" class="easyui-linkbutton" data-options="iconCls:'icon-undo',plain:true">取消</a>
    </div>
    <div id="tb2" style="text-align: right">
        <label for="cc">分类:</label>
        <input id="cc" value="01" />
    </div>

    <div id="win_news">
    </div>
    <div id="news_msg_add_win">
        <form id="news_msg_add_from" method="post">
            <div>
                <label for="_1">标题:</label>
                <input  class="easyui-textbox"  id="_1" name="name" data-options="required:true"/>
            </div>
            <div>
                <label for="news_msg_des">描述:</label>
                <input class="easyui-textbox" id="news_msg_des" type="text" name="html" data-options="required:true,multiline:true,width:400,height:100" />

            </div>
            <div>
                <label for="news_msg_item">条目:</label>
                <input id="news_msg_item" name="item"/>
            </div>
            <a id="news_form_savebtn" href="javascript:void(0);" class="easyui-linkbutton" data-options="iconCls:'icon-save'">保存</a>
        </form>
    </div>
</div>
<div class="easyui-layout" fit="true">
    <div data-options="region:'west',split:true,border:false" style="width: 450px">
        <table id="news_msg"></table>
    </div>

    <div data-options="region:'center',title:'消息预览'">
        <div id="msg_pre_panel"></div>
    </div>
    <div data-options="region:'east',split:true,title:'文章预览'" style="width:350px;">
        <div id="west_panel">
        </div>
    </div>

</div>
<script type="text/javascript">
    var btn2=$("<a href='javascript:btnss()'>你好</a>").linkbutton({iconCls:'icon-search',plain:true}).prop('outerHTML');
    var $news_msg=$('#news_msg');
    var $win_news=$('#win_news');
    var $west_panel=$('#west_panel');
    var $msg_pre_panel=$('#msg_pre_panel');
    var $news_msg_add_win=$('#news_msg_add_win');
    var $news_msg_add_from=$('#news_msg_add_from');


    var $news_form_savebtn=$('#news_form_savebtn');


    var $news_msg_item=$('#news_msg_item');
    $('#cc').combotree({
        url: 'data/fenlei.json',
        onClick:function(node){
            var me=$(this);
            if(me.tree('isLeaf',node.target)){
                var gird=$news_msg_item.combogrid('grid');
                gird.datagrid('load', {
                    id: node.id
                });
            }else{
                $.messager.show({
                    title:'我的消息',
                    msg:'请选择叶子节点'
                });
            }
            console.log(node.target);
        },
        required: true
    });
    $news_msg_add_from.form({
        url: 'data/test.json',
        onSubmit: function (){
            return true;
        },
        success: function (data) {
            console.log(data);
            alert(data.success);
        }
    });
    $.parser.parse($news_msg_add_from);
    $news_msg_add_win.window({
        width:600,
        height:400,
        draggable:true,
        closed : true,
        onOpen:function(){
        }
    });

    $news_form_savebtn.on('click',function(){
        $news_msg_add_from.form('submit');
    });
    $msg_pre_panel.panel({
        border:false,
        fit:true,
        href:'test2.html',
        style:{padding:2}
    });
    $west_panel.panel({
        fit:true,
        border:false,
        href:'index2.html',
        style:{padding:2}
    });
    $win_news.window({
        width:600,
        height:400,
        //modal:true,
        draggable:true,
        closed : true,
        href:'test2.html'
    });
    $news_msg.edatagrid({
        idField :"id",
        fit:true,
        pagination:true,
        singleSelect:true,
        checkOnSelect:false,
        selectOnCheck:false,
        url:'data/newsmsg_data.json',
        saveUrl: 'save_user.php',
        updateUrl: 'update_user.php',
        destroyUrl: 'destroy_user.php',
        toolbar:'#tb1',
        striped:true,
        columns:[[
            {field:'ck',checkbox:true},
            {field:'id',title:'NewsId'},
            {field:'title',title:'标题',editor:{type:'textbox',options:{required:true}}},
            {field:'author',title:'作者'},
            {field:'description',title:'描述',width:100},
            {field:'ctime',title:'创建时间',width:80,editor:{type:'datetimebox',options:{required:true}}},
            {field:'btn',title:'操作',formatter:function(){
                return btn2;
            }}
        ]]
    });
    //$.parser.parse('#tb2');
    $news_msg_item.combogrid({
        width:500,
        multiple:true,
        panelWidth:500,
        pagination:true,
        idField:'id',
        textField:'title',
        toolbar:'#tb2',
        url:'data/newsmsg_data.json',
        columns: [
            [
                {field:'ck',checkbox:true},
                {field: 'id', title: 'NewsId'},
                {field: 'title', title: '标题', editor: {type: 'textbox', options: {required: true}}},
                {field: 'author', title: '作者'},
                {field: 'description', title: '描述', width: 100},
                {field: 'ctime', title: '创建时间', width: 80, editor: {type: 'datetimebox', options: {required: true}}}
                /*{field: 'btn', title: '操作', formatter: function () {
                    return btn2;
                }}*/
            ]
        ]
    });

    function del_news_msg (){
        var rows =  $news_msg.edatagrid("getChecked");
        $news_msg.edatagrid('destroyRow',rows);
    }

    function btnss(e){
        var row=$news_msg.edatagrid('getSelected');
        console.log(row);
        $win_news.window('open');
    }
</script>
</body>
<script type="text/javascript">
    alert("init");
</script>
<script type="text/javascript" src="js/easyui-lang-zh_CN.js"></script>
</html>